<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span>OrderConfirm</span>
    </nav-bread>
    <div class="container">
      <div class="checkout-order">
        <!-- process step -->
        <div class="check-step">
          <ul>
            <li class="cur"><span>Confirm</span> address</li>
            <li class="cur"><span>View your</span> order</li>
            <li><span>Make</span> payment</li>
            <li><span>Order</span> confirmation</li>
          </ul>
        </div>

        <!-- order list -->
        <div class="page-title-normal checkout-title">
          <h2><span>Order content</span></h2>
        </div>
        <div class="item-list-wrap confirm-item-list-wrap">
          <div class="cart-item order-item">
            <div class="cart-item-head">
              <ul>
                <li>Order contents</li>
                <li>Price</li>
                <li>Quantity</li>
                <li>Subtotal</li>
              </ul>
            </div>
            <ul class="cart-item-list">
              <li v-for="item in checkedCartList" :key="item.productId">
                <div class="cart-tab-1">
                  <div class="cart-item-pic">
                    <img :src="`/static/${item.productImage}`" :alt="item.productName">
                  </div>
                  <div class="cart-item-title">
                    <div class="item-name">{{ item.productName }}</div>

                  </div>
                </div>
                <div class="cart-tab-2">
                  <div class="item-price">{{ item.salePrice | currency }}</div>
                </div>
                <div class="cart-tab-3">
                  <div class="item-quantity">
                    <div class="select-self">
                      <div class="select-self-area">
                        <span class="select-ipt">×{{ item.productNum }}</span>
                      </div>
                    </div>
                    <div class="item-stock item-stock-no">In Stock</div>
                  </div>
                </div>
                <div class="cart-tab-4">
                  <div class="item-price-total">{{ item.productNum * item.salePrice | currency }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- Price count -->
        <div class="price-count-wrap">
          <div class="price-count">
            <ul>
              <li>
                <span>Item subtotal:</span>
                <span>{{ totalPrice | currency }}</span>
              </li>
              <li>
                <span>Shipping:</span>
                <span>{{ shipping | currency }}</span>
              </li>
              <li>
                <span>Discount:</span>
                <span>{{ discount | currency }}</span>
              </li>
              <li>
                <span>Tax:</span>
                <span>{{ tax | currency }}</span>
              </li>
              <li class="order-total-price">
                <span>Order total:</span>
                <span>{{ orderTotal | currency }}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="order-foot-wrap">
          <div class="prev-btn-wrap">
            <router-link to="/address" class="btn btn--m">Previous</router-link>
          </div>
          <div class="next-btn-wrap">
            <!-- 生成订单并付款 -->
            <button class="btn btn--m btn--red" @click=createOrder>Proceed to payment</button>
          </div>
        </div>
      </div>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import NavHeader from '@/components/NavHeader'
import NavFooter from '@/components/NavFooter'
import NavBread from '@/components/NavBread'
import Modal from '@/components/Modal'
import axios from 'axios'
export default {
  name: 'OrderConfirm',
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  },
  data () {
    return {
      checkedCartList: []
    }
  },
  computed: {
    // 商品总价
    totalPrice () {
      return this.checkedCartList.reduce((total, item) =>
        total + parseInt(item.productNum) * parseFloat(item.salePrice), 0)
    },
    // 满299免运费
    shipping () {
      return this.totalPrice >= 299 ? 0 : 80
    },
    tax () {
      return this.totalPrice * 0.17
    },
    // 折扣： 每满1000减100
    discount () {
      return ~~(this.totalPrice / 1000) * 100
    },
    // 计算税费、快递、折扣后的订单价格
    orderTotal () {
      return this.totalPrice + this.tax + this.shipping - this.discount
    }
  },
  methods: {
    // 获取用户购物车内已经勾选的商品列表
    getCheckedCartList () {
      axios.get('/users/cart/cartList')
        .then(res => {
          if (res.status === 200) {
            const data = res.data
            this.checkedCartList = data.result.list.filter(item => item.checked === '1')
          }
        })
    },
    createOrder () {
      const addressId = this.$route.params.addressId
      const orderTotal = this.orderTotal
      // 操作数据库
      axios.post('/users/order/create', { addressId, orderTotal })
        .then(res => {
          if (res.status === 200) {
            const data = res.data
            if (data.status === '0') {
              // 创建订单成功，跳转到提示页面
              const orderInfo = data.result.orderInfo
              this.$router.push(`/orderSuccess?orderId=${orderInfo.orderId}&orderTotal=${orderInfo.orderTotal}`)
            }
          }
        })
        .catch(err => {
          console.log(err.message)
        })
    }
  },
  mounted () {
    this.getCheckedCartList()
  }
}
</script>
